@Browser360: Browser360;

.@{Browser360}-wrapper {
  min-height: 810px;

  .@{Browser360} {
    height: 100%;
    display: flex;
    align-items: center;

    &-text {
      min-height: 424px;

      >*.queue-anim-leaving {
        position: relative !important;
      }

      .title-h1 {
        position: relative;
        margin: 0 0 16px;
        text-align: left;
        font-size: 2em;
        font-weight: bold;
      }

      .title-content {
        position: relative;
        margin-bottom: 64px;
        text-align: left;
      }

      ul {
        position: relative;
        display: inline-block;

        li {
          margin-bottom: 24px;

          .@{Browser360}-icon {
            display: inline-block;
            font-size: 35px;
            color: #1890ff;
            position: absolute;
          }

          .icon-animation {
            animation: bigSmall 1s infinite linear;
          }

          .@{Browser360}-title,
          .@{Browser360}-content {
            margin-left: 45px;

            div div {
              margin-bottom: 5px;
            }

          }

          .@{Browser360}-title {
            font-size: 14px;
            margin-bottom: 10px;
          }
        }
      }


      img.img-spin {
        display: inline-block;
        animation: loadingCircle2 2s infinite linear;
      }

      .download_button {

        display: flex;
        justify-content: center;

        a {
          width: 150px;
          height: 40px;
          margin-right: 30px;
        }
      }



    }
  }
}


@keyframes loadingCircle2 {
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}


@keyframes bigSmall {

  0% {
    color: #1890ff;
  }


  50% {
    color: rgb(255, 24, 101);
  }

  100% {
    color: #1890ff;
  }
}

@media screen and (max-width: 767px) {
  .@{Browser360}-wrapper {
    height: 860px;
    overflow: hidden;

    .@{Browser360} {
      display: block;

      &-img,
      &-text {
        display: block;
        width: 100%;
      }

      &-text {

        >h1,
        >p {
          text-align: center;
        }

        >h1 {
          margin: 56px auto 16px;
        }

        p {
          margin-bottom: 32px;
        }
      }

      &-img {
        margin-top: 20px;
      }
    }
  }
}